<template>
  <div>
    <a-descriptions bordered title="Upstream" layout="vertical" :column="2" >
      <a-descriptions-item label="Name">
        {{data.name}}
      </a-descriptions-item>
      <a-descriptions-item label="Slots">
        {{data.slots}}
      </a-descriptions-item>
      <a-descriptions-item label="Targets" :span="2">
        <div v-for="target in data.targets" :key="target">
        <div>target: {{target.target}}</div>
        <div>weight: {{target.weight}}</div>
        </div>
      </a-descriptions-item>
    </a-descriptions>
  </div>
</template>
<script>
import axios from 'axios';

const queryData = params => {
  let upstreamName=params.upstreamName
  return axios.get('http://localhost:9725/upstreams/'+upstreamName, { params: params });
};


export default {
  name: 'UpstreamDetail',
  data() {
    return {
      data: {},
      loading: false,
    };
  },
  mounted() {
    this.fetch();
  },
  methods: {
    fetch() {
      console.log("serviceId:"+this.$route.query.upstreamName) 
      let upstreamName=this.$route.query.upstreamName
      this.loading = true;
      queryData({
        upstreamName:upstreamName,
      }).then(({ data }) => {
        console.log(data)
        this.data = data;
        this.loading = false;
      });
    },
  },
};
</script>
